<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '绑定手机号',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar>
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">绑定手机号</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <view class="flex justify-start hr-78 bdr-bottom-2-#F5F5F5 mg-b-32">
          <view class="wr-40 hr-40">
            <image width="100%" height="100%" :src="iconList[0].icon" mode="scaleToFill" />
          </view>
          <view class="wr-620 mg-l-26">
            <wd-input
              custom-input-class="font-size-40 font-500 text-gray-333"
              placeholder="请输入手机号"
              type="text"
              v-model="userInfo.mobile"
              no-border
            />
          </view>
        </view>
        <view class="flex justify-start hr-78 bdr-bottom-2-#F5F5F5 pos-relative">
          <view class="wr-38 hr-44">
            <image width="100%" height="100%" :src="iconList[1].icon" mode="scaleToFill" />
          </view>
          <view class="wr-620 mg-l-26">
            <wd-input
              custom-input-class="font-size-40 font-500 text-gray-333"
              placeholder="请输入验证码"
              type="text"
              v-model="userInfo.code"
              no-border
            />
          </view>
          <view class="pos-absolute top-0 right-0 z-10" @click="getMoblieCode">
            <text class="text-blue-1 font-size-28 font-500">获取验证码</text>
          </view>
        </view>
        <view class="hr-100 p-x-32 box-border mg-t-126" @click="handleSubmit">
          <wd-button custom-class="h-full" plain block>绑定</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { editUser, getsms } from '@/service/my/my'

defineOptions({
  name: 'Coupon',
})
const { safeAreaInsets } = uni.getSystemInfoSync()

const pagesBack = () => {
  uni.navigateBack()
}
let smsCode: any = ''
const getMoblieCode = () => {
  getsms(userInfo.value.mobile).then((res: any) => {
    smsCode = res.data.code
  })
}
const iconList: any = ref([
  {
    icon: '../../static/images/icons/mobile-1.png',
  },
  {
    icon: '../../static/images/icons/mobile-2.png',
  },
])
const userInfo = ref({
  mobile: '',
  code: '',
})
onLoad(() => {})
onShow(() => {})
const handleSubmit = () => {
  if (userInfo.value.code === smsCode) {
    const data: any = {
      type: 3,
      value: userInfo.value.mobile,
    }
    editUser(data).then((res: any) => {
      uni.showToast({
        title: '绑定成功',
        icon: 'none',
        duration: 1000,
      })
      uni.navigateTo({
        url: '/pages/home/userInfo',
      })
    })
  }
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
</style>
